<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏弹出效果</title>
		<style>
			/* 结合实际html结构--通配【合理 】 */
		*{
			font: 16px "楷体";
			/* 去掉内外边距 */
			margin: 0;
			padding: 0;
			/* 无序列表：有样式----去样式 */
			list-style-type: none;
			/* 无序列表：有样式----
			去全部样式：list-style-type  去列表样式
			                    list-style-position   去列表项标记位置样式
								list-style-image     去列表项图片标记样式
			
			*/
			list-style: none;
			/* *左栏效果
			 *1.左栏的空间区域   235*450   背景颜色
			 *2.左栏区域内容【li】   加权235*50  相对定位---挂靠点【固定位置】
			 *3.给每个区域内容【li】  加鼠标移动上去改变颜色
			 *4.左栏弹出框：400*450  1像素边框   绝对定位--钩子-微调
			 */
		}
		aside{
			width: 235px;
			height: 450px;
			background: #43394c;
			margin: 20px 50px;
		}
		aside ul.sidebar li{
			width: 235px;
			height: 50px;
			/* 相对定位---挂靠点 */
			position: relative;
			text-align: center;
			line-height: 50px;
		}
		aside ul.sidebar li:hover{
			background:#eee ;
		}
		aside ul.sidebar div.out {
			width: 400px;
			height: 450px;
			border: 1px solid red;
			/* 挂靠位：绝对定位：按照相对定位基点开始定位 */
			position: absolute;
			left: 285px;
			/* 显示与隐藏    JavaScript  【JQuery框架】 */
			disp lay: none;
		}
		</style>
	</head>
	<body>
		<!--     html结构     结构化标记【语义化标签】    aside元素   针对：左栏、广告、弹出效果....有利于SEO优化 
		之前版本通过div+id起别名方式【缺点：繁琐、定义起名、冗余】-->
		<aside>
			<ul class="sidebar">
				<!-- 弹出框 -->
				<div class="out"></div>
				<li>手机</li>
				<li>电脑</li>
				<li>家具</li>
				<li>男装</li>
				<li>女装</li>
				<li>美妆</li>
				<li>房产</li>
				<li>母婴</li>
				<li>食品</li>
				
			</ul>
		</aside>
	</body>
</html>
<!-- 事件源  ：hover（）  切换效果与css悬停hover一致
                                        语法：.hover（function（）{
											
										}）；-->